<template>
	<view class="container">
		<!-- 顶部图片 -->
		<image class="top-image" src="/static/images/login-bg.png" mode="aspectFill"></image>
		
		<!-- 登录表单 -->
		<view class="login-form">
			<view class="form-title">欢迎登录</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<input 
					type="number" 
					v-model="phone" 
					placeholder="请输入手机号"
					maxlength="11"
				/>
			</view>
			<view class="form-item">
				<text class="label">验证码</text>
				<input 
					type="number" 
					v-model="code" 
					placeholder="请输入验证码"
					maxlength="6"
				/>
				<text 
					class="code-btn" 
					:class="{'disabled': counting > 0}"
					@click="sendCode"
				>
					{{counting > 0 ? `${counting}s后重试` : '获取验证码'}}
				</text>
			</view>
			<button class="login-btn" @click="handleLogin">登录</button>
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<checkbox value="1" :checked="isAgree" />
					<text>我已阅读并同意</text>
					<text class="link" @click="showAgreement">《用户协议》</text>
					<text>和</text>
					<text class="link" @click="showPrivacy">《隐私政策》</text>
				</checkbox-group>
			</view>
		</view>
		
		<!-- 协议弹窗 -->
		<uni-popup ref="agreementPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">用户协议</view>
				<scroll-view scroll-y class="popup-scroll">
					<view class="popup-text">
						<text>1. 本协议是您与川味火锅特产店之间就川味火锅特产店服务等相关事宜所订立的契约。</text>
						<text>2. 您应当在使用本服务之前认真阅读全部协议内容。如您对协议有任何疑问，可向川味火锅特产店咨询。</text>
						<text>3. 如您不同意本协议的任何内容，请勿注册或使用本服务。</text>
						<text>4. 本协议内容包括协议正文及所有川味火锅特产店已经发布的或将来可能发布的各类规则。</text>
						<text>5. 川味火锅特产店有权根据需要不时地制订、修改本协议及/或各类规则，并以网站公示的方式进行公告，不再单独通知您。</text>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="closeAgreement">我知道了</view>
			</view>
		</uni-popup>
		
		<!-- 隐私政策弹窗 -->
		<uni-popup ref="privacyPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">隐私政策</view>
				<scroll-view scroll-y class="popup-scroll">
					<view class="popup-text">
						<text>1. 我们收集的信息</text>
						<text>2. 信息的使用</text>
						<text>3. 信息的共享</text>
						<text>4. 信息的保护</text>
						<text>5. 您的权利</text>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="closePrivacy">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 手机号
const phone = ref('')

// 验证码
const code = ref('')

// 倒计时
const counting = ref(0)

// 是否同意协议
const isAgree = ref(false)

// 发送验证码
const sendCode = () => {
	if (counting.value > 0) return
	
	// 验证手机号
	if (!/^1[3-9]\d{9}$/.test(phone.value)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}
	
	// 开始倒计时
	counting.value = 60
	const timer = setInterval(() => {
		counting.value--
		if (counting.value <= 0) {
			clearInterval(timer)
		}
	}, 1000)
	
	// 模拟发送验证码
	uni.showToast({
		title: '验证码已发送',
		icon: 'success'
	})
}

// 处理登录
const handleLogin = () => {
	// 验证手机号
	if (!/^1[3-9]\d{9}$/.test(phone.value)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}
	
	// 验证验证码
	if (!/^\d{6}$/.test(code.value)) {
		uni.showToast({
			title: '请输入6位验证码',
			icon: 'none'
		})
		return
	}
	
	// 验证是否同意协议
	if (!isAgree.value) {
		uni.showToast({
			title: '请阅读并同意用户协议和隐私政策',
			icon: 'none'
		})
		return
	}
	
	// 模拟登录成功
	uni.showLoading({
		title: '登录中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		
		// 存储用户信息
		const userInfo = {
			id: '10001',
			phone: phone.value,
			nickname: '用户' + phone.value.substr(-4),
			avatar: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1nx2Xh2Z9tP_!!6000000005155-0-tps-1316-736.jpg',
			token: 'mock_token_' + Date.now()
		}
		
		// 存储到本地
		uni.setStorageSync('userInfo', userInfo)
		uni.setStorageSync('token', userInfo.token)
		
		// 更新全局状态
		getApp().globalData.userInfo = userInfo
		getApp().globalData.isLogin = true
		
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		})
		
		// 返回上一页
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}, 1000)
}

// 处理协议勾选
const handleAgreementChange = (e) => {
	isAgree.value = e.detail.value.length > 0
}

// 显示用户协议
const showAgreement = () => {
	uni.$refs.agreementPopup.open()
}

// 关闭用户协议
const closeAgreement = () => {
	uni.$refs.agreementPopup.close()
}

// 显示隐私政策
const showPrivacy = () => {
	uni.$refs.privacyPopup.open()
}

// 关闭隐私政策
const closePrivacy = () => {
	uni.$refs.privacyPopup.close()
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #FFFFFF;
}

/* 顶部图片样式 */
.top-image {
	width: 100%;
	height: 400rpx;
}

/* 登录表单样式 */
.login-form {
	padding: 40rpx;
}

.form-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 60rpx;
	text-align: center;
}

.form-item {
	position: relative;
	margin-bottom: 40rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

input {
	width: 100%;
	height: 88rpx;
	background-color: #F5F5F5;
	border-radius: 44rpx;
	padding: 0 40rpx;
	font-size: 28rpx;
	color: #333;
}

.code-btn {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28rpx;
	color: #D02B29;
}

.code-btn.disabled {
	color: #999;
}

.login-btn {
	width: 100%;
	height: 88rpx;
	background-color: #D02B29;
	border-radius: 44rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 60rpx;
}

.agreement {
	margin-top: 40rpx;
	text-align: center;
	font-size: 24rpx;
	color: #666;
}

.agreement checkbox {
	transform: scale(0.7);
	margin-right: 10rpx;
}

.link {
	color: #D02B29;
}

/* 弹窗样式 */
.popup-content {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 40rpx;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 30rpx;
}

.popup-scroll {
	height: 600rpx;
}

.popup-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.popup-text text {
	display: block;
	margin-bottom: 20rpx;
}

.popup-btn {
	height: 80rpx;
	background-color: #D02B29;
	border-radius: 40rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	line-height: 80rpx;
	margin-top: 30rpx;
}
</style> 